<script setup name="search-singer">
import { useSearchResults } from '@/hookes/useSearch'
import { formatMsgTime } from '@/utils/util'

const props = defineProps({
  searchKey: {
    type: String
  }
})

const { list, loading, finished, onLoad, highlightKeyword } = useSearchResults('album')
</script>

<template>
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <RouterLink :to="{ path: '/album', query: { id: item.id } }" v-for="item in list" :key="item.id">
      <van-cell :border="false">
        <template #icon>
          <van-image :src="item.picUrl" radius="10px" width="50" height="50" />
        </template>

        <template #title>
          <span v-html="highlightKeyword(item.name)"></span>
        </template>

        <template #label>
          <span v-for="(i, index) in item.artists" :key="index">
            <span v-if="searchKey === i.name">{{ i.name }}</span>
          </span>
          <span> 发布时间：{{ formatMsgTime(item.publishTime) }}</span>
        </template>
      </van-cell>
    </RouterLink>
  </van-list>
</template>

<style scoped lang="scss">
.van-cell {
  color: var(--reversal-text);
  opacity: .9;
  background-color: var(--list-background);

  :deep(.van-cell__title) {
    padding-left: 10px;
  }

  :deep(.van-cell__label) {
    font-size: 10px;
  }

  .van-button--round {
    font-size: 10px;
    background-color: transparent !important;
    height: 24px;

    :deep(.van-button__content) {
      color: red;
    }
  }
}
</style>
